import {
  Card,
  Breadcrumb,
  Form,
  Radio,
  Select,
  DatePicker,
  Button,
  Table,
  Tag,
  Space,
} from 'antd'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
import { useDispatch, useSelector } from 'react-redux'
import { getChannels, getArticles } from '@/store/actions'
import { useEffect } from 'react'
import img404 from '@/assets/error.png'
import { Link } from 'react-router-dom'
import 'moment/locale/zh-cn'
import locale from 'antd/es/date-picker/locale/zh_CN'

const { Option } = Select
const { RangePicker } = DatePicker

const articleStatus = {
  0: { color: 'yellow', text: '草稿' },
  1: { color: '#ccc', text: '待审核' },
  2: { color: 'green', text: '审核通过' },
  3: { color: 'red', text: '审核失败' }
}

const Article = () => {
  const columns = [
    {
      title: '封面',
      dataIndex: 'cover',
      render: (cover) => {
        return <img src={cover || img404} width={200} height={150} alt="" />
      },
    },
    {
      title: '标题',
      dataIndex: 'title',
      width: 220,
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (data) => <Tag color={articleStatus[data].color}>{articleStatus[data].text}</Tag>,
    },
    {
      title: '发布时间',
      dataIndex: 'pubdate',
    },
    {
      title: '阅读数',
      dataIndex: 'read_count',
    },
    {
      title: '评论数',
      dataIndex: 'comment_count',
    },
    {
      title: '点赞数',
      dataIndex: 'like_count',
    },
    {
      title: '操作',
      render: (data) => {
        return (
          <Space size="middle">
            <Button type="primary" shape="circle" icon={<EditOutlined />} />
            <Button
              type="primary"
              danger
              shape="circle"
              icon={<DeleteOutlined />}
            />
          </Space>
        )
      },
    },
  ]

  // const data = [
  //   {
  //     id: '8218',
  //     comment_count: 0,
  //     cover: 'http://geek.itheima.net/resources/images/15.jpg',
  //     like_count: 0,
  //     pubdate: '2019-03-11 09:00:00',
  //     read_count: 2,
  //     status: 2,
  //     title: 'webview离线化加载h5资源解决方案',
  //   },
  // ]

  const dispatch = useDispatch()
  const { channels, page, pageSize, count, list } = useSelector(
    (state) => state.article
  )
  useEffect(() => {
    dispatch(getChannels())
    dispatch(getArticles())
  }, [dispatch])
  return (
    <div>
      <Card
        title={
          <Breadcrumb separator=">">
            <Breadcrumb.Item>
              <Link to="/home">首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>内容管理</Breadcrumb.Item>
          </Breadcrumb>
        }
        // style={{ marginBottom: 20 }}
      >
        <Form initialValues={{ status: -1, channelId: 1 }}>
          <Form.Item label="状态" name="status">
            <Radio.Group>
              <Radio value={-1}>全部</Radio>
              <Radio value={0}>草稿</Radio>
              <Radio value={1}>待审核</Radio>
              <Radio value={2}>审核通过</Radio>
              <Radio value={3}>审核失败</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item label="频道" name="channelId">
            <Select placeholder="请选择文章频道" style={{ width: 120 }}>
              {channels.map((item) => (
                <Option key={item.id} value={item.id}>
                  {item.name}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item label="日期" name="date">
            <RangePicker locale={locale}></RangePicker>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              筛选
            </Button>
          </Form.Item>
        </Form>
      </Card>
      <div>
        <Card title={`根据筛选条件共查询到 ${count} 条结果：`}>
          {/* rowKey="id"表示如果data数据源中的元素没有key属性, 使用数据源data中的 id 属性作为表格指定 key 属性 */}
          <Table
            rowKey="id"
            columns={columns}
            dataSource={list}
            // pagination={{
            //   current: page,
            //   pageSize,
            //   total: count,
            //   showSizeChanger: true,
            //   position: ['bottomCenter'],
            // }}
          />
        </Card>
      </div>
    </div>
  )
}

export default Article
